<template>
  <div class="home-container">
     <!-- 头部搜索区域 -->
     <van-nav-bar class="page-navbar">
       <template #title>
          <van-button type="info" class="searchBtn" icon="search" round to="search">搜索</van-button>
       </template>
     </van-nav-bar>
     <!-- 频道列表 -->
     <van-tabs v-model="active" class="channel-tab">
      <van-tab v-for="channel in channelsList"  :title="channel.name" :key="channel.id">
         <article-list :channel="channel"></article-list>
      </van-tab>
      <template #nav-right>
          <div class="seat"></div>
          <div class="wrap-nav">
             <van-icon name="wap-nav"  size="24" @click="isChannelEdit=true"></van-icon>
          </div>
      </template>
     </van-tabs>
     <!-- 频道编辑弹出层 -->
     <van-popup
     v-model="isChannelEdit"
     closeable
     close-icon-position="top-left"
     position="bottom"
     get-container="body"
     :style="{ height: '100%' }">
      <channel-edit
        :user-channels="channelsList"
        @choseChannel="isChannelEdit = false"
        @updateActive="active = $event"
        :active="active"
      >
      </channel-edit>
     </van-popup>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { getUserChannels } from '@/apis/user'
import { getItem } from '@/utils/storage'
import ArticleList from './components/ArticleList'
import ChannelEdit from './components/ChannelEdit'
export default {
  name: 'HomeIndex',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      active: 0,
      channelsList: [],
      isChannelEdit: false
    }
  },
  computed: {
    ...mapState([
      'userToken'
    ])
  },
  created () {
    this.loadUserChannels()
  },
  methods: {
    async loadUserChannels () {
      let channels = []
      if (this.userToken) {
        const { data } = await getUserChannels()
        channels = data.data.channels
      } else {
        const localChannels = getItem('user-channels')
        if (localChannels) {
          channels = localChannels
        } else {
          const { data } = await getUserChannels()
          channels = data.data.channels
        }
      }
      this.channelsList = channels
    }
  }
}
</script>
<style lang='less' scoped>
.home-container{
  /deep/.van-nav-bar__title{
    max-width: none;
  }
  .searchBtn{
    width: 277px;
    height: 32px;
    border: none;
    .vant-icon{
      font-size: 16px;
    }
    .van-button__text{
      font-size: 14px;
    }
  }
  .channel-tab{
    /deep/.van-tab{
      border-right: 1px solid #edeff3;
      border-bottom:1px solid #edeff3;
    }
    /deep/.van-tabs__line{
      width: 15px;
      height: 3px;
      bottom: 20px;
      background: #3296fa;
    }
    .seat{
      width: 33px;
      flex-shrink: 0;
    }
    .wrap-nav{
      position: fixed;
      right:0;
      width: 33px;
      height: 43px;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: .9;
      background: #fff;
    }
  }
}
</style>
